<template>
	<view class="address-warp page-bg content-30">
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">持卡人</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="cardName" type="text" placeholder="请输入持卡人姓名" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">银行卡号码</view>
				<view class="form-group__con">
					<input class="form-group__from " v-model="cardNumber" type="number"  placeholder="请输入银行卡号码" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">开户行</view>
				<view class="form-group__con" >
					<picker class="form-group__from link" mode="selector" :range="range" @change="pickerChange">
						<view v-if="!bankName" class="picker-res desc" >请选择</view>
						<view v-else class="picker-res" >{{bankName}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		
		
		<view class="circular-submit" @click="formSubmit">确定添加</view>
	</view>
</template>

<script>
	import { api } from '../../utils/api.js'
	import  common  from '../../utils/common.js'
	export default{
		data() {
			return{
				range: [],
				bankIndex: 0,
				cardName: '', // 银行卡姓名
				cardNumber: '', //	银行卡号
				bankName:'' //银行名称
			}
		},
		onLoad() {
			this.range = common.banks
		},
		methods:{
			pickerChange(res) {
				console.log(res)
				this.bankIndex = res.detail.value
				this.bankName = this.range[this.bankIndex]
			},
			
			formSubmit() {
				let { bankIndex,cardName, cardNumber, bankName } = this.$data
				console.log(cardName)
				if(!cardName) { this.$showToast('请输入持卡人姓名~'); return }
				if(!cardNumber) { this.$showToast('请输入银行卡号码~'); return }
				if(!common.isBankCard(cardNumber)) { this.$showToast('请输入正确的银行卡号码~'); return }
				if(!bankName) { this.$showToast('请选择开户行~'); return }
				api.saveUserCardAsync({cardName, cardNumber, bankName }, () => {
					this.$showToast('保存成功~')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.circular-submit{
		margin-top: 50rpx;
	}
</style>
